import React, { useEffect, useState } from "react";
import { Button, SearchBar, Space, Toast, Swiper, Tabs } from "antd-mobile";
import logo from "../../../assets/homeimg/logo.png";
import { FireFill, PhonebookOutline, UserContactOutline, AddOutline, LocationFill } from "antd-mobile-icons";
import style from "./home.module.css";
import request from "../../../api/request";
import { useNavigate } from "react-router-dom";
import VirtualList from "../../../hooks/useVirtual.jsx";

function Index() {
    const nav = useNavigate()
    // 轮播图数据
    const [banners, setBanners] = useState([])
    // 常见病症数据
    const [commonDisease, setCommonDisease] = useState([])
    // 获取资讯类型数据
    const [tabItems, setTabItems] = useState([])
    // 资讯列表数据
    const [data, setData] = useState([])
    // tab的key值
    const [activeKey, setActiveKey] = useState('1')



    // 获取轮播图接口
    const getbanner = () => {
        request.get("/share/v1/bannersShow").then((res) => {
            if (res.data) {
                setBanners(res.data.result)
            }
        })
            .catch((error) => {
                console.error("获取banner失败:", error);
                Toast.show({ content: "获取banner失败，请稍后重试", duration: 2000 });
            });
    }
    // 获取常见病症接口
    const getdisease = () => {
        request.get("/share/knowledgeBase/v1/findDepartment").then((res) => {
            // console.log(res);
            if (res.data) {
                setCommonDisease(res.data.result)
            }
        })
    }
    // 获取资讯类型接口
    const getzxtype = () => {
        request.get('/share/information/v1/findInformationPlateList').then((res) => {
            console.log(res);
            setTabItems(res.data.result)
        })
    }
    // 获取对应的资讯列表
    const getzxlist = (id) => {
        console.log(id);
        setActiveKey(id)
        const plateId = id || (tabItems[0]?.id || 1)
        request.get('/share/information/v1/findInformationList', {
            params: {
                plateId,
                page: 1,
                count: 50
            }
        }).then((res) => {
            console.log(res);
            setData(res.data.result)
        })
    }
    useEffect(() => {
        getbanner()
        getdisease()
        getzxtype()
        getzxlist()
    }, []);

    // 点击跳转对应病症
    const gotobingzheng = (id) => {
        console.log(id);
        nav(`/bingzheng?id=${id}`)
    }
    // 点击找医生，跳转医生列表页
    const gotoyisheng =()=>{
        nav('/doctor')
    }

    // const renderItem = (item) => (
    //     console.log(item),
        
    //     <div style={{
    //         padding: '10px',
    //         borderBottom: '1px solid #eee',
    //         boxSizing: 'border-box',
    //     }}>
    //         <h3>{item.aa}</h3>
    //         <p>{item.content}</p>
    //     </div>
    // );
    return (
        <div className={style.box}>
            {/* 头部区域 */}
            <div className={style.header}>
                <img style={{ width: "100%" }} src={logo} alt="" />
                <SearchBar
                    style={{ "--border-radius": "50px" }}
                    placeholder="请输入内容"
                    // 获取焦点
                    onFocus={() => nav('/search')}
                />
                <div style={{ fontSize: "16px", justifyItems: "center" }}>
                    <FireFill style={{ color: "#ff7950" }} />
                    <p style={{ fontSize: "10px" }}>健康值</p>
                </div>
            </div>
            {/* 轮播图区域 */}
            <div className={style.banner}>
                <Swiper autoplay={true} loop={true} >
                    {
                        banners.map((item, index) => {
                            return <Swiper.Item key={index} style={{ height: '170px' }}>
                                <img style={{ width: '100%', height: '100%', borderRadius: '15px' }} src={item.imageUrl} alt="" />
                            </Swiper.Item>
                        })
                    }
                </Swiper>
            </div>
            {/* 宫格 */}
            <div className={style.gridContainers}>
                <Swiper>
                    <Swiper.Item style={{ height: '90px' }} className={style.greads}>
                        <div className={style.gridItem}>
                            <PhonebookOutline style={{ fontSize: '40px', color: '#f2b442', paddingBottom: '10px' }}></PhonebookOutline>
                            <div className={style.grids}>视频咨询</div>
                        </div>
                        <div className={style.gridItem} onClick={gotoyisheng}>
                            <UserContactOutline style={{ fontSize: '40px', color: '#40e1c6', paddingBottom: '10px' }}></UserContactOutline>
                            <div className={style.grids}>找医生</div>
                        </div>
                        <div className={style.gridItem}>
                            <AddOutline style={{ fontSize: '40px', color: '#62a0fb', paddingBottom: '10px' }}></AddOutline>
                            <div className={style.grids}>找医院</div>
                        </div>
                        <div className={style.gridItem}>
                            <LocationFill style={{ fontSize: '40px', color: '#f1785c', paddingBottom: '10px' }}></LocationFill>
                            <div className={style.grids}>全国献血地</div>
                        </div>
                    </Swiper.Item>
                    <Swiper.Item style={{ height: '90px' }} className={style.greads}>
                        <div className={style.gridItem}>
                            <PhonebookOutline style={{ fontSize: '40px', color: '#f2b442', paddingBottom: '10px' }}></PhonebookOutline>
                            <div className={style.grids}>视频咨询</div>
                        </div>
                        <div className={style.gridItem}>
                            <UserContactOutline style={{ fontSize: '40px', color: '#40e1c6', paddingBottom: '10px' }}></UserContactOutline>
                            <div className={style.grids}>视频咨询</div>
                        </div>
                        <div className={style.gridItem}>
                            <AddOutline style={{ fontSize: '40px', color: '#62a0fb', paddingBottom: '10px' }}></AddOutline>
                            <div className={style.grids}>视频咨询</div>
                        </div>
                        <div className={style.gridItem}>
                            <LocationFill style={{ fontSize: '40px', color: '#f1785c', paddingBottom: '10px' }}></LocationFill>
                            <div className={style.grids}>视频咨询</div>
                        </div>
                    </Swiper.Item>
                </Swiper>
            </div>
            {/* 常见病症宫格 */}
            <div className={style.grid2}>
                {
                    commonDisease.map((item, index) => {
                        return <div className={style.inner} key={index} onClick={() => gotobingzheng(item.id)}>
                            <img className={style.img} src={item.pic} alt="" />
                            <div className={style.title}>{item.departmentName}</div>
                        </div>
                    })
                }
            </div>
            {/* 次轮播图 */}
            <div className={style.banner2}>
                <Swiper autoplay={true} loop={true} autoplayInterval={4000}>
                    <Swiper.Item style={{ height: '90px' }}>
                        <img style={{ width: '100%', height: '100%', borderRadius: '50px' }} src='https://ts1.tc.mm.bing.net/th/id/R-C.67d27dc1dd03cdcf35f34c0f0c0e7bd2?rik=wqMSW9xLcK910Q&riu=http%3a%2f%2fwww.51kzt.com%2fimages%2fyiqing%2fbanner.jpg&ehk=c39zQ8kucF%2fVsudtkGFUxP7i3opENVitNHOqmSvD2y4%3d&risl=&pid=ImgRaw&r=0' alt="" />
                    </Swiper.Item>
                    <Swiper.Item style={{ height: '90px' }}>
                        <img style={{ width: '100%', height: '100%', borderRadius: '50px' }} src='https://img.shetu66.com/2023/09/13/1694590813460216.png' alt="" />
                    </Swiper.Item>
                </Swiper>
            </div>
            {/* 新闻资讯 */}
            <h4 className={style.bigtitle}>科普文章</h4>
            <div>
                <Tabs style={{ '--title-font-size': '13px' }} onChange={getzxlist} activeKey={activeKey} >
                    {
                        tabItems.map((item) => {
                            return <Tabs.Tab title={item.name} key={item.id}>
                                <div>
                                    {/* 虚拟列表 */}
                                    <VirtualList
                                        data={data}
                                        itemHeight={100}  // 每项高度
                                        // renderItem={renderItem}
                                        containerHeight={600}  // 可视区域高度
                                        bufferSize={3}   // 缓冲数量
                                    ></VirtualList>
                                </div>
                            </Tabs.Tab>
                        })
                    }
                </Tabs>
            </div>


        </div>
    );
}

export default Index;
